<template>
  <div>
    <h1>鼠标位置的获取</h1>
    <p>x:{{point.x}} | y:{{point.y}}</p>
    <button @click.stop="reset">重置</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
});
</script>

<script setup lang="ts">
  import {ref,onMounted} from 'vue'

  interface pointType{
    x:number,
    y:number
  }
  const point = ref<pointType>({
    x:-1,
    y:-1
  })

  const reset = () => {
    point.value = {
      x:-1,
      y:-1
    }
  }
  onMounted(() => {
    document.onclick = function(e:MouseEvent){
      point.value = {
        x:e.clientX,
        y:e.clientY
      }
    }
  })
</script>